<template>
  <!-- 歌单 -->
  <div class="playlist-item-box">
    <div class="playlist-cover">
      <a href="javascript:;" @click="clickPlaylistDetail(item.id)">
        <img
          class="playlist-pic"
          :src="item.picUrl || item.coverImgUrl"
          :alt="item.name"
        />
        <i class="mod-cover-mark"></i>
        <i class="mod-cover-icon-play"></i>
      </a>
    </div>
    <h4 class="playlist-title">
      <a
        href="javascript:;"
        class="playlist-title-txt"
        :title="item.name"
        @click="clickPlaylistDetail(item.id)"
      >
        {{ item.name }}
      </a>
    </h4>
    <div class="playlist-other">播放量：{{ item.playCount | showCount }}</div>
  </div>
</template>

<script>
import { shortCount } from "common/count";
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  filters: {
    showCount(count) {
      return shortCount(count);
    },
  },
  mounted() {
    // console.log(this.item);
  },
  methods: {
    clickPlaylistDetail(id) {
      this.playPlaylistDetail(id);
    },
  },
};
</script>

<style>
.playlist-item-box {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  margin-right: 20px;
  margin-bottom: 27px;
}
.playlist-cover {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 100%;
  margin-bottom: 10px;
}
.playlist-pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1) translateZ(0);
  transition: transform 0.5s;
}
.playlist-cover:hover:hover .playlist-pic {
  transform: scale(1.1) translateZ(0);
  transition: transform 0.5s;
}
.mod-cover-mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  transition: opacity 0.5s;
}
.playlist-cover:hover .mod-cover-mark {
  opacity: 0.3;
  transition: opacity 0.5s;
}
.mod-cover-icon-play {
  background-image: url(https://y.qq.com/ryqq/static/media/cover_play.56974e6f.png?max_age=2592000);
}
.mod-cover-icon-play {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -35px;
  width: 70px;
  height: 70px;
  opacity: 0;
  transform: scale(0.7) translateZ(0);
  transition-property: opacity, transform;
  transition-duration: 0.5s;
  zoom: 1;
}
.playlist-cover:hover .mod-cover-icon-play {
  opacity: 1;
  transform: scale(1) translateZ(0);
  transition-property: opacity, transform;
  transition-duration: 0.5s;
}
.playlist-title {
  overflow: hidden;
}
.playlist-title-txt {
  float: left;
  width: 100%;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 32px;
  line-height: 32px;
}
</style>